---
import type { RoadmapFileType } from '../../lib/roadmap';
import FeaturedRoadmapItem from './FeaturedRoadmapItem.astro';

export interface Props {
  roadmaps: RoadmapFileType[];
  heading: string;
}

const { roadmaps, heading } = Astro.props;
---

<div class="py-4 sm:py-14 border-b border-b-slate-900 relative">
  <div class="container">
    <h2
      class="hidden sm:flex absolute rounded-lg -top-[17px] left-1/2 -translate-x-1/2 bg-slate-900 py-1 px-3 border border-slate-900 text-md text-slate-400 font-regular"
    >
      {heading}
    </h2>

    <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
      {
        roadmaps.map((roadmap) => (
          <li>
            <FeaturedRoadmapItem roadmap={roadmap} />
          </li>
        ))
      }
    </ul>
  </div>
</div>
